<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1:before {
            content: "666";    /* 常量 */
            content: url();    /* 变量 */
            content: attr(data-title);   /* 变量 */
        }

        .class {
            color: red;
        }
    </style>
</head>
<body>
    <h1 class="h1" data-title="666"></h1>
    <h1 class="class">34</h1>


    <script>

        // 常量:不会改变的量
        // 变量:会改变的量


        // 一串字符没有打引号 -- 会被解析为一个变量    hello is not defined 
        // document.write(hello) ;


        // 使用var 声明一个变量
        // = 表示赋值的意思 ---- 不是相等的意思
        // 假设x 代表hello world 
        var x = 'hello world' ;

        // 变量的输出不能加引号
        document.write(x) ;  // hello world

        // 变量所存的值是可以被改变的
        x = 'hi' ;

        document.write(x) ;   // hi



        // 声明一个变量
        var y ;
        // 给变量赋值
        y = '666' ; 
        // 输出变量
        document.write(y) ;



        // 变量的命名规则
            // 1 必须由数字，字母，下换线及$组成
            // 2 数字不能开头 
            // 3 不能使用关键字和保留字  --- 在js代码中有殊含义的单词

        //  建议
        //    使用小写
        //    做到见名知意
        //       驼峰命名法或者组合命名(下划线)










        // 错误命名示例

        // 1 非法字符
        // var 你好 = 'hello' ;    // 只能是数字 ， 字母 ，下划线 
        // document.write(你好) ;

        // var x-y = '你好' ;

        // 2 数字不能开头
        // var 1y = 'hi' ;


        // 3 使用了关键字或者保留字
        // var class = 'hi' ;






        // 见名知意

        var userName = '叶开' ;  // 小驼峰
        var user_name = '叶开' ;  // 下划线命名

        // 不推荐
        var yong_hu = '叶开' ;











    </script>


</body>
</html>